<%include ./com/head.ejs %>
  </head>
  <body>

    <div class="indexPage content menuCon">
        <div class="tit">
            欢迎 <%= username %> 会员.
        </div>
        <div class="linkBox">
          <ul>
              <% for(var i=0;i<links.length;i++){ %>
              <li data-type="<%= links[i].type %>" data-href="<%= links[i].url %>" data-img="<%= links[i].icon %>" data-name="<%= links[i].name %>">
                <div>
                    <a href="<%= links[i].url %>" <% if(links[i].type == 'link'){ %> target="_blank" <% } %> class="menuCon">
                        <span class="menu menu02" style="visibility: hidden;">
                            <% if(links[i].type=='link'){ %>
                            <span class="editLink">修改链接</span>
                            <% } %>
                            <span class="editIcon">修改图标</span>
                            <span class="editName">修改名称</span>
                            <span class="del">删除</span>
                        </span>
                    </a>
                    <div class="imgBox">
                        <% if(links[i].icon){ %>
                          <img src="<%= links[i].icon %>">
                        <% }else{ %>
                          <img src="/dist/img/link_bg.png">
                        <% } %>
                    </div>
                    <div class="nameBox">
                        <input type="text" value="<%= links[i].name %>" name="" class="inText" style="display: none;" />
                        <span><%= links[i].name %></span>
                    </div>
                </div>
                <% if(links[i].type == 'folder' && links[i].childs){ %>
                <ul>
                    <% for(var j=0;j<links[i].childs.length;j++){ %>
                    <li data-type="<%= links[i].childs[j].type %>" data-href="<%= links[i].childs[j].url %>" data-img="<%= links[i].childs[j].icon %>" data-name="<%= links[i].childs[j].name %>">
                      <div>
                          <a href="<%= links[i].childs[j].url %>" target="_blank" class="menuCon">
                              <span class="menu menu02" style="visibility: hidden;">
                                  <% if(links[i].childs[j].type=='link'){ %>
                                  <span class="editLink">修改链接</span>
                                  <% } %>
                                  <span class="editIcon">修改图标</span>
                                  <span class="editName">修改名称</span>
                                  <span class="del">删除</span>
                              </span>
                          </a>
                          <div class="imgBox">
                              <% if(links[i].childs[j].icon){ %>
                                <img src="<%= links[i].childs[j].icon %>">
                              <% }else{ %>
                                <img src="/dist/img/link_bg.png">
                              <% } %>
                          </div>
                          <div class="nameBox">
                              <input type="text" value="<%= links[i].childs[j].name %>" name="" class="inText" style="display: none;" />
                              <span><%= links[i].childs[j].name %></span>
                          </div>
                      </div>
                    </li>
                    <% } %>
                </ul>
                <% } %>
              </li>
              <% } %>
          </ul>
        </div>
        <div class="menu menu01" style="visibility: hidden;">
            <ul>
              <li><a href="/user/login">登录</a></li>
              <li><a href="/user/register">注册</a></li>
              <li><a href="/user/editPwd">修改密码</a></li>
              <li><a href="javascript:window.location.reload();">刷新页面</a></li>
              <li><a href="javascript:;" class="addFolder">新建文件夹</a></li>
              <li><a href="javascript:;" class="addLink">新建链接</a></li>
              <li><a href="javascript:;" class="fullScreen">全屏显示</a></li>
              <li><a href="javascript:;" class="exitFull" style="display: none;">退出全屏</a></li>
              <li><a href="javascript:;" class="saveLink">保存所有链接</a></li>
            </ul>
        </div>
    </div>
    <!-- 图片上传弹框 -->
    <div class="imgUploadBox hideBox" style="display: none;">
        <div class="image-editor bootclearfix">
            <div class="imgBox">
                <div class="imgView cropit-preview"></div>
                <input type="range" class="inRange cropit-image-zoom-input">
            </div>
            <div class="btnBox">
                <label class="btn">
                    <input type="file" class="inFile cropit-image-input">
                    <span>选择图片</span>
                </label>
                <a href="javascript:;" class="imgUploadBoxBtn01 btn closeBtn">确定</a>
                <a href="javascript:;" class="imgUploadBoxBtn02 btn closeBtn">取消</a>
            </div>
        </div>
    </div>

<%include ./com/foot.ejs %>
  <script type="text/javascript" src="/dist/js/jquery.cropit.js"></script>
  <script type="text/javascript">
      // 图片上传裁剪
      var $editor = $('.image-editor');
      $editor.cropit();
      // $('.imgUploadBoxBtn01').click(function() {
      //     var imageData = $('.image-editor').cropit('export');
      //     console.log(imageData);
      // });
      $('body').on('click','.imgUploadBox .closeBtn',function () {
        var is = $(this).hasClass('imgUploadBoxBtn01');
        var _targetDom = $(this).parents('.imgUploadBox')[0]._targetDom;
        if(!is){
            $('.imgUploadBox').hide();
            return false;
        }else{
            var data = {};
            data.imageData = $('.image-editor').cropit('export');
            $.post('/user/imgUpload',{data: JSON.stringify(data)},function (data, textStatus, xhr) {
                if(data.type == 'ok'){
                    layer.msg('上传成功!');
                    $(_targetDom).attr('data-img',data.data);
                    $(_targetDom).find('img').attr('src',data.data);
                }else{
                    layer.msg('上传失败!');
                }
                $('.imgUploadBox').hide();
            },'json');
        }
      });
  </script>
  <script type="text/javascript">
      function fullScreen(element) {
        // 判断各种浏览器，找到正确的方法
        var requestMethod = element.requestFullScreen || //W3C
        element.webkitRequestFullScreen ||  //Chrome等
        element.mozRequestFullScreen || //FireFox
        element.msRequestFullScreen; //IE11
        if (requestMethod) {
          requestMethod.call(element);
        } else if (typeof window.ActiveXObject !== "undefined") {
          var wscript = new ActiveXObject("WScript.Shell");
          if (wscript !== null) {
            wscript.SendKeys("{F11}");
          }
        }
      }
      function exitFull() {
        // 判断各种浏览器，找到正确的方法
        var exitMethod = document.exitFullscreen || //W3C
        document.mozCancelFullScreen ||  //Chrome等
        document.webkitExitFullscreen || //FireFox
        document.webkitExitFullscreen; //IE11
        if (exitMethod) {
          exitMethod.call(document);
        } else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
          var wscript = new ActiveXObject("WScript.Shell");
          if (wscript !== null) {
            wscript.SendKeys("{F11}");
          }
        }
      }
      // 右键菜单 公共js
      (function () {
          // 隐藏所有 菜单
          function menuHidden() {
                $('.menu').css('visibility','hidden');
          }
          // 显示右键菜单
          function fn_oncontextmenu(menu,event) {
              menuHidden();
              var W = menu.offsetWidth;
              var H = menu.offsetHeight;
              if(event.clientX + W > screen.availWidth){
                menu.style.left = event.clientX - W + 'px';
              }else{
                menu.style.left = event.clientX + 'px';
              }
              if(event.clientY + H > screen.availHeight){
                menu.style.top = event.clientY - H + 'px';
              }else{
                menu.style.top = event.clientY + 'px';
              }
              menu.style.visibility = 'visible';
              return false;
          };
          $('body')
          .on('click',function (event) {
              menuHidden();
          })
          .on('contextmenu','.menuCon',function (event) {
              event.stopPropagation();
              event.preventDefault();
              var menu = $(this).children('.menu')[0];
              fn_oncontextmenu(menu,event);
          })
          .on('contextmenu','.menu',function (event) {
              event.stopPropagation();
              event.preventDefault();
              return false;
          });
      }());
      // 获取 post 数据
      function get_postData() {
          function get_data(li) {
            var _ = {};
            _this = $(li);
            _.type = _this.attr('data-type');
            _.url = _this.find('a').attr('href');
            _.name = _this.find('.inText').val();
            _.icon = _this.find('img').attr('src');
            return _;
          }
          var li = $('.linkBox>ul').children('li');
          var allLink = {link:[]};
          var _ = {},_this,__ = {};
          for (var i = 0; i < li.length; i++) {
            _ = get_data(li[i]);
            if(_.type == 'folder'){
              _.childs = [];
              var _lis = $(li[i]).find('li');
              for (var j = 0; j < _lis.length; j++) {
                __ = get_data(_lis[j]);
                _.childs.push(__);
              }
            }
            allLink.link.push(_);
          }
          return allLink;
      }
      // 桌面右键菜单
      $('.content')
      .on('click','.addFolder',function () {
          var Ht = '<li data-type="folder" data-href="javascript:;" data-img="/dist/img/folder_bg.png" data-name="新建文件夹"><div><a href="javascript:;" class="menuCon"><span class="menu menu02" style="visibility:hidden"><span class="editLink">修改链接</span> <span class="editIcon">修改图标</span> <span class="editName">修改名称</span> <span class="del">删除</span></span></a><div class="imgBox"><img src="/dist/img/folder_bg.png"></div><div class="nameBox"><input type="text" value="新建文件夹" name="" class="inText" style="display:none"> <span>新建文件夹</span></div></div></li>';
          $('.linkBox').find('ul').append(Ht);
      })
      .on('click','.addLink',function () {
          var Ht = '<li data-type="link" data-href="javascript:;" data-img="/dist/img/link_bg.png" data-name="新建链接"><div><a href="javascript:;" target="_blank" class="menuCon"><span class="menu menu02" style="visibility:hidden"><span class="editIcon">修改图标</span> <span class="editName">修改名称</span> <span class="del">删除</span></span></a><div class="imgBox"><img src="/dist/img/link_bg.png"></div><div class="nameBox"><input type="text" value="新建链接" name="" class="inText" style="display:none"> <span>新建链接</span></div></div></li>';
          $('.linkBox').find('ul').append(Ht);
      })
      .on('click','.fullScreen',function (){
          fullScreen(document.documentElement);
          $('.fullScreen').hide();
          $('.exitFull').show();
      })
      .on('click','.exitFull',function (){
          exitFull();
          $('.exitFull').hide();
          $('.fullScreen').show();
      })
      .on('click','.saveLink',function (){
          var allLink = get_postData();
          $.post('/user/saveLink', {allLink: JSON.stringify(allLink)}, function(data, textStatus, xhr) {
              if(data.type == 'ok'){
                  layer.msg('保存成功!');
              }else{
                  layer.msg('保存失败!');
              }
          },'json');
      })
      .on('click','.del',function () {
          var li = $(this).parents('li');
          li.remove();
      })
      .on('click','.editName',function () {
          var li = $(this).parents('li');
          var nameBox = li.find('.nameBox');
          nameBox.find('span').hide();
          li.find('a').hide();
          nameBox.find('.inText').val(nameBox.find('span').text()).show().focus();
      })
      .on('click','.editIcon',function () {
          $('.imgUploadBox')[0]._targetDom = $(this).parents('li');
          $('.imgUploadBox').show();
      })
      .on('click','.editLink',function () {
          var _this = this;
          var li = $(this).parents('li');
          //prompt层
          layer.prompt({title: '请输入URL链接地址', formType: 2}, function(text, index){
              layer.close(index);
              var u = text;
              var is = /^http[s]?:\/\//.test(u);
              if(is){
                li.find('a').attr({
                  'target': '_blank',
                  'href': u
                });
                li.attr('data-href',u);
              }
          });
      })
      .on('keyup','.inText',function (e) {
          if(e.keyCode == '13'){
              var li = $(this).parents('li');
              var nameBox = li.find('.nameBox');
              var v = $(this).val();
              nameBox.find('span').text(v).show();
              nameBox.find('.inText').hide();
              li.find('a').show();
              li.attr('data-name',v);
          }
      })

  </script>
  </body>
</html>
